<template>
	<div class="app-container">
		<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
			<el-table-column align="center" label="ID" width="80">
				<template slot-scope="scope">
					<span>{{ scope.row.id }}</span>
				</template>
			</el-table-column>

			<el-table-column width="180px" align="center" label="Date">
				<template slot-scope="scope">
					<span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
				</template>
			</el-table-column>

			<el-table-column width="120px" align="center" label="Author">
				<template slot-scope="scope">
					<span>{{ scope.row.author }}</span>
				</template>
			</el-table-column>

			<el-table-column width="100px" label="Importance">
				<template slot-scope="scope">
					<svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon"></svg-icon>
				</template>
			</el-table-column>

			<el-table-column class-name="status-col" label="Status" width="110">
				<template slot-scope="{row}">
					<el-tag :type="row.status | statusFilter">
						{{ row.status }}
					</el-tag>
				</template>
			</el-table-column>

			<el-table-column min-width="300px" label="Title">
				<template slot-scope="{row}">
					<router-link :to="'/example/edit/'+row.id" class="link-type">
						<span>{{ row.title }}</span>
					</router-link>
				</template>
			</el-table-column>

			<el-table-column align="center" label="Actions" width="120">
				<template slot-scope="scope">
					<router-link :to="'/example/edit/'+scope.row.id">
						<el-button type="primary" size="small" icon="el-icon-edit">
							Edit
						</el-button>
					</router-link>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList"></pagination>
	</div>
</template>

<script>
	const l = httpVueLoader;
	const Pagination = l('/vue/components/Pagination/index.vue'); // Secondary package based on el-pagination
	import { fetchList } from "/vue/api/article.js";
	module.exports = {
		name: 'ArticleList',
		components: { pagination: Pagination },
		filters: {
			statusFilter(status) {
				const statusMap = {
					published: 'success',
					draft: 'info',
					deleted: 'danger'
				}
				return statusMap[status]
			}
		},
		data() {
			return {
				list: null,
				total: 0,
				listLoading: true,
				listQuery: {
					page: 1,
					limit: 20
				}
			}
		},
		created() {
			this.getList();
		},
		methods: {
			getList() {
				this.listLoading = true
				fetchList(this.listQuery).then(response => {
					this.list = response.data.items
					this.total = response.data.total
					this.listLoading = false
				})
			}
		}
	}
</script>

<style scoped>
	.edit-input {
		padding-right: 100px;
	}

	.cancel-btn {
		position: absolute;
		right: 15px;
		top: 10px;
	}
</style>
